<style lang="sass" scoped>
    .container{
        background:#e6e6e6;
        padding-bottom:122px;
    }
    .addr-group{
        background:#fff;
        padding:0 40px;
        height:170px;
        align-items:center;
        .addr-icon{
            width:48px;
            height:69px;
        }
        .addr-center{
            margin:0 30px;
            flex:1;
            .one{
                font-size:34px;
                color:#3c3c3c;
            }
            .two{
                align-items:center;
                justify-content:space-between;
                .icon{
                    width:38px;
                    height:38px;
                    display:block;
                }
                .mr{
                    color:#bebebe;
                    font-size:22px;
                    width:66px;
                    height:32px;
                    line-height:32px;
                    background:#fff;
                    text-align:center;
                    border:1px solid #bebebe;
                }
                .text{
                    width:560px;
                    font-size:28px;
                }
                
            }
            &.active{
                .mr{
                    background:#bebebe;
                    color:#fff;
                }
            }
            .three{
                justify-content:flex-end;
                .btn{
                    font-size:28px;
                    color:#bebebe;
                    &.btn-2{
                        margin-left:32px;
                    }
                }
            }
        }
        .go-icon{
            width:22px;
            height:38px;
        }
    }
    .add-addr{
        height:168px;
        background:#fff;
        padding:0 38px;
        align-items:center;
        .icon1{
            width:112px;
            height:112px;
        }
        .text{
            flex:1;
            color:#3c3c3c;
            font-size:34px;
            margin:0 25px;
        }
        .icon2{
            width:22px;
            height:40px;
        }
    }
    .line{
        img{
            height:10px;
            display:block;
        }
    }
    .order-detail{
        background:#fff;
        margin-top:28px;
        padding-top:20px;
        .store-group{
            .store-name{
                height:92px;
                line-height:92px;
                padding:0 38px;
                color:#3c3c3c;
                font-size:28px;
            }
            .book-group{
                .goods{
                }
                .book-detail{
                    height:254px;
                    background:#f5f5f5;
                    padding:16px 38px;
                    .img{
                        width:216px;
                        height:216px;
                        background:#ff0000;
                        img{
                            display:block;
                            width:100%;
                            height:100%;
                        }
                    }
                    .detail-cont{
                        width:414px;
                        flex-direction: column;
                        margin-left:48px;
                        .name{
                            font-size:28px;
                            color:#3c3c3c;
                        }
                        .title{
                            font-size:22px;
                            color:#3c3c3c;
                            flex:1;

                            .text{
                                overflow:hidden; 
                                text-overflow:ellipsis;
                                display:-webkit-box; 
                                -webkit-box-orient:vertical;
                                -webkit-line-clamp:2; 
                            }
                        }
                        .price-cont{
                            height: 42px;
                            .price{
                                color:#ff6e6e;
                                height: 42px;
                                line-height: 42px;
                                width:300px;
                                .currency{
                                    height: 20px;
                                    line-height: 20px;
                                    font-size:22px;
                                    float:left;
                                    margin-top:18px;
                                }
                                .text{
                                    font-size:45px;
                                    height: 42px;
                                    line-height: 42px;
                                    float:left;
                                }
                            }
                            .num{
                                flex:1;
                                text-align:right;
                                color:#787878;
                                font-size:28px;
                            }
                        }
                    }
                }
                .buy-num{
                    height:126px;
                    margin:0 38px;
                    justify-content: space-between;
                    
                    .text{
                        color:#787878;
                        font-size:28px;
                        height:126px;
                        line-height:126px;
                    }
                    .nums{
                        width:200px;
                        justify-content:space-between;
                        align-items:center;
                        input{
                            background:#f5f5f5;
                            width:94px;
                            height:66px;
                            border:0;
                            text-align:center;
                            font-size:34px;
                        }
                        .icon1{
                            width:36px;
                            height:5px;
                        }
                        .icon2{
                            width:36px;
                            height:36px;
                        }
                    }
                }
                .transfee{
                    border-top:1px solid #ccc;
                    height:86px;
                    line-height:86px;
                    font-size:28px;
                    color:#bebebe;
                    margin:0 38px;
                    border-bottom:1px solid #ccc;
                }
                .zongjie{
                    height:92px;
                    line-height:92px;
                    padding:0 38px;
                    justify-content:flex-end;
                    .text{
                        width:230px;
                        font-size:28px;
                        color:#787878;
                    }
                    .zj-price{
                        color:#ff6e6e;
                        margin-left:50px;
                        .currency{
                            font-size:22px;
                        }
                        .price{
                            font-size:45px;
                        }
                    }
                }
            }
        }
    }
    .footer{
        position:fixed;
        z-index:10;
        bottom:0;
        left:0;
        width:750px;
        height:122px;
        background:#fff;
        .total-price{
            flex:1;
            text-align:center;
            .text{
                color:#3c3c3c;
                font-size:28px;
                height:122px;
                line-height:122px;
            }
            .price{
                color:#ff6e6e;
                .currency{
                    font-size:22px;
                }
                .price-text{
                    font-size:45px;
                }
            }
        }
        .buy-btn{
            height:122px;
            line-height:122px;
            text-align:center;
            flex:1;
            background:#ff6e6e;
            color:#fff;
            font-size:45px;
        }
    }
</style>
<template>
    <div class="container">
        <router-link :to="{name:'home_addr_list'}" v-if="userAddressInfo.uAddressId" class="addr-group flex" tag="div">
            <img class="addr-icon" src="../../assets/images/home/dz.png" alt="">
            <div class="addr-center">
                <div class="one">{{userAddressInfo.receiver}}（{{userAddressInfo.receiverPhone}}）</div>
                <div class="two flex">
                    <span class="text">{{userAddressInfo.receiverAddress}}</span>
                </div>
            </div>
            <img class="go-icon" src="../../assets/images/home/jr.png" alt="">
        </router-link>
        <router-link v-else :to="{name:'home_addr_add'}" tag="div" class="add-addr flex">
            <img src="../../assets/images/order/xzsh_icon.png" class="icon1">
            <span class="text">新增收货地址</span>
            <img src="../../assets/images/order/ts_xyx.png" class="icon2">
        </router-link>
        <div class="line">
            <img src="../../assets/images/order/csb.png">
        </div>
        <div class="order-detail">
            <div class="store-group">
                <!-- <div class="store-name">好好读书绘本馆</div> -->
                <div class="book-group">
                    <div v-for="(item,i) in itemList" class="goods">
                        <div class="book-detail flex">
                            <div class="img">
                                <img :src="item.itemImageUrl" alt="">
                            </div>
                            <div class="detail-cont flex">
                                <div class="name">{{item.itemName}}</div>
                                <div class="title">
                                    <div class="text">{{item.itemName}}</div>
                                </div>
                                <div class="price-cont flex">
                                    <div class="price clearfix">
                                        <span class="currency">￥</span>
                                        <span class="text">{{item.price}}</span>
                                    </div>
                                    <div class="num">
                                        <span class="x">x</span>
                                        <span class="text">1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="buy-num flex">
                            <span class="text">购买数量</span>
                            <div class="flex nums">
                                <img @click="computeFee(item,'jian')" src="../../assets/images/order/js.png" class="icon1">
                                <input v-model.trim="item.count" type="text">
                                <img @click="computeFee(item,'add')" src="../../assets/images/order/an_zj.png" class="icon2">
                            </div>
                        </div>
                    </div>
                    <div class="transfee">运费：￥{{carriageFee}}</div>
                    <div class="zongjie flex">
                        <span class="text">共{{itemList.length}}件商品 小计：</span>
                        <span class="zj-price">
                            <span class="currency">￥</span>
                            <span class="price">{{subtotal}}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer flex">
            <div class="total-price">
                <span class="text">合计金额</span>
                <span class="price">
                    <span class="currency">￥</span>
                    <span class="price-text">{{totalFee}}</span>
                </span>
            </div>
            <div @click="submitOrder()" class="buy-btn">付款</div>
        </div>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    import bookcar from "commonvue/bookcar";
    export default {
        components: {
            totop,
            bookcar,
        },
        data() {
            return {
                userAddressInfo:{uAddressId:''},
                itemList:[],
                carriageFee:'',
                totalFee:'',
                subtotal:'',
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                $('body').css({background:'#e6e6e6'})
                if(this.$route.query.shoppingCarIds){
                    this.settle();
                }
                if(this.$route.query.itemCode){
                    this.immediatelyBuy();
                }
            });
        },
        methods: {
            settle(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/settle/settle',
                    data:{
                        shoppingCarIds:this.$route.query.shoppingCarIds
                    },
                    success:(data=>{
                        for(let n in data.data){
                            if(data.data[n]||data.data[n]===0)this[n] = data.data[n]
                        }
                    }),
                    goingError:true,
                    error:(data=>{
                        if(data.code===3021){
                            //直接弹出错误信息
                            popup.alert({ 
                                content: data.desc,
                                yes:()=>{
                                    router.go(-1)
                                }
                            });
                        }else{
                            //直接弹出错误信息
                            popup.alert({ content: data.desc });
                        }
                    })
                })
            },
            immediatelyBuy(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/settle/immediatelyBuy',
                    data:{
                        itemCodes:this.$route.query.itemCode
                    },
                    success:(data=>{
                        for(let n in data.data){
                            if(data.data[n])this[n] = data.data[n]
                        }
                    })
                })
            },
            computeFee(item,type){
                if(type==='add'){
                    item.count+=1;
                }else{
                    if(item.count>1){
                        item.count-=1;
                    }else{
                        return;
                    }
                }
                this.$nextTick(()=>{
                    let arr = [];
                    let list = JSON.parse(JSON.stringify(this.itemList));
                    list.forEach((item2,i2) => {
                        arr.push({
                            itemCode:item2.itemCode,
                            count:item2.count,
                        })
                    });
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/settle/computeFee',
                        data:{
                            itemInfo:JSON.stringify(arr)
                        },
                        success:(data=>{
                            for(let n in data.data){
                                if(n!=='userAddressInfo')this[n] = data.data[n]
                            }
                        })
                    })
                })
            },
            submitOrder(){
                let arr = [];
                let list = JSON.parse(JSON.stringify(this.itemList));
                list.forEach((item2,i2) => {
                    arr.push({
                        itemCode:item2.itemCode,
                        count:item2.count,
                    })
                });
                let param = {
                    uAddressId:this.userAddressInfo.uAddressId,
                    itemInfo:JSON.stringify(arr),
                    remark:'',
                    companyCode:util.getStorage('local','companyCode'),
                }
                if(!param.uAddressId){
                    popup.alert({content:'请选择收货地址！'});
                    return;
                }
                if(arr.length===0){
                    popup.alert({content:'购买数为0！'});
                    return;
                }
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/order/submitOrder',
                    data:param,
                    success:(data=>{
                        this.pay(data.data);
                    })
                })
            },
            getWxH5PayConfig(orderNo){
                return new Promise((resolve,reject)=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/pay/getWxH5PayConfig',
                        data:{
                            orderNo:orderNo
                        },
                        success:(data=>{
                            resolve(data.data);
                        })
                    })
                })
            },
            pay(orderNo){
                const WXPAY = (content)=>{
                    var timer = 0;
                    var PAY_SUCCESS = function(){
                        server.queryPayStatus(orderNo).then((res)=>{
                            if(!res){
                                timer +=1;
                                if(timer<5){
                                    setTimeout(() => {
                                        PAY_SUCCESS();
                                    }, 100);
                                }else{
                                    popup.alert({
                                        content:'订单异常，请稍后重试！',
                                        yes:()=>{
                                            router.replace({name:'home',query:{type:'order'}})
                                        }
                                    })
                                }
                                return;
                            }
                            router.replace({name:'order_pay_success'})
                        })
                    }

                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId": content.appId, //公众号名称，由商户传入
                            "timeStamp": content.timeStamp, //时间戳，豪秒数
                            "nonceStr": content.nonceStr, //随机串
                            "package": content.package,
                            "signType": content.signType, //微信签名方式
                            "paySign": content.paySign //微信签名
                        }, res => {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                PAY_SUCCESS();
                            } else if (/cancel/.test(res.err_msg)) {
                                popup.miss({content:'支付已取消'});
                            } else if (/fail/.test(res.err_msg)) {
                                popup.miss({content:`支付失败【${res.err_msg}】`});
                            } else {
                                popup.miss({content:res.err_msg});
                            }
                        }
                    )
                }
                this.getWxH5PayConfig(orderNo).then(res=>{
                    WXPAY(res)
                })
            },
        },
        
    };
</script>